<template>
  <section class="ling-top-text upload-report-wrap">
    <div class="upload-report">
      <div class="job-description">
        <div class="job-status" v-if="type=='add'">
          <h3>当前服务状态</h3>
          <van-field
            v-model="uploadData.userJobStatusDesc"
            placeholder="请选择服务状态"
            @click="showPicker = true"
          />
          <div class="describe">{{describe}}</div>
        </div>

        <h3>{{type=='create'?'工作情况描述':'进度描述'}}</h3>
        <van-field
          v-model="uploadData.description"
          maxlength="300"
          autosize
          type="textarea"
          :placeholder="type=='create'?'请填写工作情况描述':'请填写进度描述'"
          name="work"
          v-validate="'required'"
          :error="errors.has('work')"
        />
      </div>
      <div class="upload-img">
        <h3>上传图片</h3>
        <van-uploader v-model="fileList" multiple :max-count="6" placeholder="请上传图片" />
      </div>
      <span class="no-img" v-if="showTip && fileList == ''">请上传图片</span>
      <div class="ling-linearButton improvement_btn" @click="handleSubmit">
        <span v-if="type=='create'">确认上传</span>
        <span v-if="type=='add'">确认添加</span>
        <span v-if="type=='edit'">确认保存</span>
      </div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="UserJobStatus"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </section>
</template>

<script>
import { uploadToQiniu } from '@/utils/qiniuUpload'
import { UserJobStatus } from '@/utils/enum'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('myData')
export default {
  name: 'Homepage',
  inject: ['reload'],
  data() {
    return {
      fileList: [],
      showTip: false,
      // uploadData: {
      //   description: '',
      //   reportAnnexList: [],
      //   userJobId: this.$route.params.userJobId,
      //   userJobStatus: 'FINISHED'
      // },
      UserJobStatus,
      describe: '',
      value: '',
      showPicker: false,
      uploadData: {
        ...this.userJobReportDetail,
        reportAnnexList: [],
        userJobId: this.$route.params.userJobId,
        userJobStatus: ''
      },
      canSubmit: true //防重复提交
    }
  },
  props: ['userJobReportDetail', 'type'],
  components: {},
  created() {
    this.setFileList()
  },
  methods: {
    ...mapActions(['createUserJobReport', 'editUserJobReport']),
    onConfirm(value) {
      this.uploadData.userJobStatus = value.value
      this.uploadData.userJobStatusDesc = value.text
      this.describe = value.note
      this.showPicker = false
    },
    setFileList() {
      if (this.type != 'edit') return
      const fileList = this.userJobReportDetail.reportAnnexList.map(item => ({
        annexType: 'PICTURE',
        annexUrl: item.annexUrl,
        url: item.annexUrl
      }))
      this.fileList = fileList
    },
    handleSubmit() {
      this.$validator.validate().then(result => {
        this.showTip = true
        if (result) {
          if (this.fileList == '') return
          if (!this.canSubmit) return
          this.canSubmit = false
          const files = this.fileList.map(item => {
            return item.file
          })
          files.forEach(async (item, index) => {
            await uploadToQiniu(item, () => {})
              .then(response => {
                this.fileList.push({
                  annexType: 'PICTURE',
                  annexUrl: response,
                  url: response
                })
              })
              .catch(e => {
                console.log(e, 'catch')
              })
            this.fileList = this.fileList.filter(val => {
              return val.annexType == 'PICTURE'
            })
            this.uploadData.reportAnnexList = this.fileList
            if (this.uploadData.reportAnnexList.length == files.length) {
              this.type == 'edit'
                ? await this.editUserJobReport(this.uploadData)
                : this.type == 'add'
                ? await this.createUserJobReport(this.uploadData)
                : await this.createUserJobReport({
                    ...this.uploadData,
                    userJobStatus: 'FINISHED'
                  })
              this.$router.push(`/haveTaskDetail`)
              this.canSubmit = true
              this.reload() //刷新页面
              this.$toast('操作成功')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.upload-report-wrap {
  min-height: 40vh;
  .upload-report {
    padding: 5px 20px 20px;
    position: relative;
    .job-description {
      h3 {
        color: #666;
        font-size: 14px;
        font-weight: normal;
        line-height: 50px;
      }
      .van-cell {
        padding: 0;
      }
    }
    .upload-img {
      h3 {
        font-size: 14px;
        color: #7ac5ef;
        line-height: 64px;
      }
    }
    .no-img {
      color: #ee0a24;
      font-size: 14px;
    }
  }
  .job-status {
    .describe {
      font-size: 10px;
      line-height: 25px;
      color: #666;
    }
  }
}
</style>

<style lang="less">
.upload-report-wrap {
  textarea {
    border-bottom: 1px solid #dddddd;
  }
  .van-uploader {
    margin: -5px;
    .van-uploader__wrapper {
      //   display: flex;
      //   justify-content: space-between;
      .van-uploader__upload {
        width: 100px;
        height: 75px;
      }
      .van-uploader__preview,
      .van-uploader__upload {
        margin: 5px;
      }
      .van-uploader__preview-image {
        width: 100px;
        height: 75px;
      }
    }
  }
  .job-status {
    .van-cell__value {
      border-bottom: 1px solid #dddddd;
    }
  }
}
</style>
